<template>

  <div id="homeContent">
    <!--    3%-->
    <n-row id="header">
      <n-col span="24">
        <Header/>
      </n-col>
    </n-row>
    <div id="splitContainer" ref="splitContainer">
      <div ref="sourceTree" id="sourceTree">
        <TreeMain @clickDatabase="clickDatabase" @clickTable="clickTable"/>
      </div>
      <div ref="centerBoard" id="centerBoard">
        <div style="height: 100%">
          <TabCenterBoard :tabList="tabList"/>
        </div>
      </div>
      <div ref="objectInfo" id="objectInfo">
        <ObjectInfo :viewObjectData="viewObjectData"/>
      </div>
    </div>
    <!--    3%-->
    <div>
      <Footer :viewDataSource="viewDataSource"/>
    </div>

  </div>


</template>

<script setup lang="ts">
import {ref, onMounted} from 'vue'
import Header from "../components/header/Header.vue";
import Footer from '../components/footer/Footer.vue'
import SqlQuery from '../components/mysql/query/SqlQuery.vue'
import TableObjectList from '../components/mysql/table/TableObjectList.vue'

import TabCenterBoard from '../components/mysql/TabCenter/TabCenterBoard.vue'
import Split from 'split.js'
import ObjectInfo from "../components/mysql/ObjectInfo.vue";
import TabListInfo from "../components/mysql/TabCenter/TabListInfo";
import TreeMain from "../components/mysql/tree/TreeMain.vue";

//div内容
const splitContainer = ref();
const sourceTree = ref();
const centerBoard = ref();
const objectInfo = ref();


//所有组件共享的对象信息
const viewObjectData = ref();
const viewDataSource = ref();


const clickDatabase = (res) => {
  viewObjectData.value = res;
  viewDataSource.value = res;
}

const clickTable = (res) => {
  viewObjectData.value = res;
}

const options = {
  gutterSize: 2,    // 分隔条的尺寸
  cursor: 'col-resize', // 鼠标悬停在分隔条上时的光标形状
  minSize: [100, 100, 100],
  sizes: [15, 60, 25]
};


const tabList = ref<TabListInfo[]>([
  {
    title: '对象',
    closable: false,
    componentName: 'TableObjectList',
    visible: true
  },
  {
    title: '查询1',
    closable: true,
    componentName: 'SqlQuery',
    visible: false
  }
])


onMounted(() => {
  Split([sourceTree.value, centerBoard.value, objectInfo.value], options)
})


</script>

<style scoped>

#header {
  height: 3%;
  width: 100%;
}

#homeContent {
  height: 100%;
  width: 100%;
  background-color: #F7F8FA;
}

#splitContainer {
  display: flex;
  flex-direction: row;
  height: 94%;
  background-color: #F7F8FA;
}

#centerBoard {
}

#sourceTree {
  background-color: #F7F8FA;
  height: 90%;
}
</style>